<template>
    <div class="main">
        <div>
            <van-nav-bar  title="会员中心" />
        </div>
        <div class="top">
           <img :src="picture" class="top-img" />
           <div class="pwdUpdate" v-if="DSuser">
               <el-button type="warning" @click="dialogFormVisible = true" plain>修改密码</el-button>
               <el-button type="success" @click="dialogFormVisible2 = true" plain>上传头像</el-button>
               <el-button type="danger"  @click="dialogFormVisible3 = true" >退出登录</el-button>
           </div>
           <div class="deleteCart" v-if="DSuser">
               <el-button type="danger"  @click="dialogFormVisible4 = true" >删除订单</el-button>
           </div>
           <div class="welcom">欢迎您，{{ this.DSuser ? this.DSuser.name : '游客' }}</div>
        </div>
        
        <div class="bottom">
            <div class="card">
                <van-cell-group>
                    <van-cell @click="changeColor(0,false)" :class="{bgc:0 != index}" title="会员卡" />
                    <van-cell @click="changeColor(1,false)" :class="{bgc:1 != index}" title="地址管理" />
                    <van-cell @click="changeColor(2,true)" :class="{bgc:2 != index}" title="我的订单" />
                    <van-cell @click="changeColor(3,false)" :class="{bgc:3 != index}" title="会员权益" />
                    <van-cell @click="changeColor(4,false)" :class="{bgc:4 != index}" title="联系我们" />
                </van-cell-group>
            </div>
            <div class="historyout">
                <div class="cart-list" v-if="showCartInfo && cartInfo">
                    <div class="row" v-for="(item, index) in cartInfo" :key="index">
                        <div class="item-img"><img :src="item.image ? item.image:item.images" width="150px"></div>
                        <div class="item-text">
                            <div class="item-name">{{ item.name?item.name:item.goodsName }}</div>
                        </div>
                        <div class="item-price">
                            <div>{{ item.price | toMoney }}元</div>
                            <div>x{{ item.count }}</div>
                            <div class="allPrice">总:{{ item.price*item.count | toMoney }}元</div>
                        </div>
                    </div>
                    <div class="place" v-if="!cartInfo">没有历史订单</div>
                    <div class="place" v-if="showCartInfo && !cartInfo">请先登录</div>
                </div>
                <div class="place" v-if="!showCartInfo">{{this.DSuser?'无':'请先登录'}}</div>
            </div>
        </div>
        <!-- 密码修改对话框 -->
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="原密码：" label-width="120px">
                <el-input v-model="form.oriPwd" autocomplete="off"></el-input>
                <span class="oriTip" v-if="oriPwd">密码应不少于6位!!</span>
            </el-form-item>
            <el-form-item label="重置密码：" :label-width="formLabelWidth">
                <el-input v-model="form.updPwd" autocomplete="off"></el-input>
                <span class="oriTip" v-if="updPwd">密码应不少于6位!!</span>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="pwdUpdate()">确 定</el-button>
        </div>
        </el-dialog>

        <!-- 上传头像对话框 -->
        <el-dialog title="上传头像" :visible.sync="dialogFormVisible2">
            <el-upload
                class="upload-demo"
                ref="upload"
                action="http://localhost:3000/user/uploadfile"
                :on-preview="handlePreview"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :headers="headers"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>

        <!-- 退出登陆对话框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogFormVisible3"
            width="30%"
            >
            <span>确定退出登陆吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="out()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除订单对话框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogFormVisible4"
            width="30%"
            >
            <span>确定删除您的历史订单吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                <el-button type="primary" @click="deleteHis()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { toMoney } from '@/assets/js/filter.js'
import axios from 'axios';
import url from "@/serviceAPI.config.js";
    export default {
        name: "Member",
        data() {
            return {
                picture: require('@/assets/image/picture.jpg'),
                user: {},
                avatar: 'http://localhost:3000/',
                headers: {},// 上传头像请求的请求头 要带上 token
                index: 0,
                cartInfo: [],// 存储历史订单数据
                showCartInfo: false,
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible2: false,
                dialogFormVisible3: false,
                dialogFormVisible4: false,
                oriPwd: false,
                updPwd: false,
                form: {
                    oriPwd: '',// 原密码
                    updPwd: '',// 初始密码
                },
                formLabelWidth: '120px',
                fileList: [] // 头像图片列表 最多上传一个 element ui 定义的数据
            }
        },
        created() {
            console.log("执行了created");
            this.user = JSON.parse(localStorage.DSuser);
            if(this.DSuser){
                this.picture =  this.avatar + this.user.avatar;
            }
            this.headers = {Authorization: this.DStoken}
            console.log(this.user);
            console.log(this.user.avatar);
        },
        computed: {
            ...mapState(['DSuser']),
            ...mapState(['DStoken'])
        },

        methods: {
            out(){
                this.dialogFormVisible3 = false;
                this.$store.commit("clearDStokenUser");
                this.$message.success("成功退出登录");
                this.refresh();
            },
            // 上传头像
            handleAvatarSuccess(res, file) {
                console.log(res.statusCode);
                this.$message.success(`头像上传成功`);
                this.$store.commit("clearDStokenUser");
                this.refresh();
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，已选择了 ${files.length} 个文件`);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            // 刷新页面
            refresh () {
                this.$router.replace({
                    path: '/refresh',
                    query: {
                        t: Date.now()
                    }
                })
            },
            // 密码修改
            pwdUpdate(){
                if(this.form.oriPwd.length<6){
                    this.oriPwd = true;
                    return;
                }
                if(this.form.updPwd.length<6){
                    this.updPwd = true;
                    return;
                }
                axios({
                    url:url.updPwd,
                    method: 'post',
                    data: {
                        oriPwd: this.form.oriPwd,
                        updPwd: this.form.updPwd
                    }
                }).then(res => {
                    console.log(res);
                    if(res.data.code ==200){
                        this.$message({
                            message: '密码修改成功，请重新登录',
                            type: 'success'
                        });
                        this.$store.commit("clearDStokenUser");
                        this.$router.go(0);
                        return;
                    }
                    this.$message.error(res.data.message);
                })
            },
            goLogin() {
                this.$router.push("/login");
            },
            goRegister() {
                this.$router.push("/register");
            },
            // useless() {
            //     this.$message('不好意思，这个没写');
            // },
            // 发送请求查找历史订单
            changeColor(i,show) {
                if(!this.DSuser){
                    this.$message.warning("请先登录");
                    return;
                }
                this.index = i;
                this.showCartInfo = show;
                console.log(this.DSuser);
                if(i == 2){
                    axios({
                        url: url.historyCart,
                        method: 'get',
                    }).then(res => {
                        this.cartInfo = res.data.cart;
                        if(!this.cartInfo){
                            this.showCartInfo = false;
                        }
                        console.log("哈哈哈");
                        if(res.data.code == 200){
                            this.$message.success(res.data.message);
                        }
                    })
                }
            },
            deleteHis() {
                axios({
                    url: url.deleteCart,
                    method: 'get'
                }).then(res =>{
                    console.log(res);
                    if(res.data.code == 200){
                        this.$message.success("删除订单成功");
                        this.cartInfo = [];
                        this.dialogFormVisible4 = false;
                        this.showCartInfo = false;
                    }
                })
            }
        },
        
    }
</script>

<style scoped>
    .main {
        width: 1226px;
        margin: 0 auto;
        position: relative;
    }
    .top-img{
        width:70px;
        height: 70px;
        border-radius: 50px;
        margin-bottom: .3rem;
        /* margin-left: 150px; */
    }
    .top{
        /* height:5rem; */
        text-align: center;
        /* padding-top: 1rem; */
        /* padding-bottom: 1rem; */
        /* background-color: #EEA2AD; */
        font-size: 0.8rem;
    }
    .login{
        /* display: flex; */
        /* flex-direction: row; */
        background-color: #fff;
        padding-left: 524px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .login div{
        /* flex:1; */
        text-align: center;
        display: inline-block;
    }
    .bottom {
        /* width: 600px; */
        /* display: inline-block; */
        position: relative;
        top: 100px;
    }
    .card {
        display: inline-block;
        width: 200px;
        height: 219px;
        position: absolute;
        left: 100px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .bgc {
        color: #e5017d;
    }
    .historyout {
        display: inline-block;
        width: 800px;
        height: 300px;
        /* background-color: red; */
        margin-left: 300px;
    }
    .cart-list {
        background-color: #fff;
        width: 800px;
        min-height: 219px;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: .5rem;
        font-size: .5rem;
        border-bottom: .0625rem solid #e4e7ed;
    }
    .item-img {
        flex: 6;
    }
    .item-text {
        flex: 8;
        padding-left: .625rem;
    }
    .item-count {
        padding-top: .625rem;
    }
    .item-price {
        flex: 4;
        text-align: right;
    }
    .allPrice {
        color: red;
    }
    .place {
        text-align: center;
        line-height: 219px;
        font-size: 25px;
        width: 800px;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .pwdUpdate {
        position: absolute;
        right: 200px;
        top: 50px;
    }
    .deleteCart {
        position: absolute;
        right: 200px;
        top: 100px;
    }
    .el-input {
        width: 120px;
    }
    .el-dialog {
        width: 30%;
    }
    .oriTip {
        color: red;
    }
    
</style>